<template>
  <div class="nav-bar">
    <div class="system-info">
      <font-awesome-icon icon="fa-brands fa-r-project"/>
      <span>投资项目管理系统</span>
    </div>
    <el-menu
        :default-active="defaultActive"
        mode="horizontal"
        background-color="#042e8d"
        text-color="#95a5a6"
        active-text-color="#fff"
        @select="handlerSelect"
    >
      <template v-for="(item, index) in headerMenus">
        <el-menu-item
            v-if="!item.children || item.children.length == 0"
            :index="item.route"
            :key="index"
        >
          <span>{{ item.title }}</span>
        </el-menu-item>
        <el-submenu v-else :key="index + 1" :index="item.route">
          <template slot="title">
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item
              v-for="(subItem, subIndex) in item.children"
              :key="subIndex"
              :index="subItem.route"
          >{{ subItem.title }}
          </el-menu-item>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  data () {
    return {
      defaultActive: 'home'
    }
  },
  computed: {
    headerMenus () {
      return this.$store.getters['menu/getHeaderMenus']
    },
  },
  methods: {
    handlerSelect (route) {
      console.log(route)
      this.$router.push({ name: route })
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-bar {
  height: 100%;
  display: flex;
  color: #fff;
  justify-content: start;
  align-items: center;

  .system-info {
    cursor: pointer;
    padding: 0 4rem 0 5.5rem;
    display: flex;
    align-items: center;

    .fa-r-project {
      // vertical-align: middle;
      padding-right: 0.5rem;
      font-size: 24px;
      color: #d63031;
    }

    span {
      font-size: 20px;

      &:hover {
        color: red;
      }
    }
  }

  .el-menu {
    color: #fff;
    // background: #042e8d;
    flex: 1;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ecf0f1;

    .el-submenu /deep/ .el-submenu__title,
    .el-menu-item {
      padding: 0 2rem;
      font-size: 1rem;
      font-weight: bold;
    }
  }
}
</style>
